<!-- 维修项目明细 -->
<template>
  <div>
    <FilterTable
      ref="table"
      :columns="columns"
      columnsRef="partPartOutboundRepairMaterialsComponentsRepairItem"
      height="auto"
      :isSelectColumn="false"
      :dataSource="dataSource"
      :onColumnsChange="columns => (this.columns = columns)"
    ></FilterTable>
    <div class="btn-wrap">
      <el-button @click="$emit('cancel')">关 闭</el-button>
    </div>
  </div>
</template>

<script>
import { searchTtRoLabour, getSfqfSelect } from '@/api/part/partOutbound/repairMaterials/index.js';
import { getDealerUser } from '@/api/part/partInventory/partInventory/index.js';
import { dictionary } from '@/utils/dictMixin';

export default {
  name: 'wxll_wxxmmx',
  mixins: [dictionary],
  props: {
    roNo: String
  },
  data() {
    return {
      columns: this.createColumns(),
      dataSource: []
    };
  },
  mounted() {
    const roNo = this.roNo;
    if (!roNo) {
      console.log('单号为空');
      return;
    }
    this.getSfqfSelect();
    this.getDealerUser();
    this.searchTtRoLabour({ roNo });
  },
  methods: {
    createColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          sorter: true,
          render: props => {
            return <span>{props.row.$index + 1}</span>;
          }
        },
        // 收费区分
        {
          title: '收费区分',
          sorter: true,
          dataIndex: 'CHARGE_PARTITION_CODE',
          // editable: false,
          // editType: 'select',
          // editItems: [],
          filter: true,
          filterType: 'checkbox',
          filterItems: [],
          dictItems: []
        },
        // 维修项目代码
        {
          title: '维修项目代码',
          sorter: true,
          dataIndex: 'LABOUR_CODEF',
          filter: true,
          filterType: 'input'
        },
        // 维修项目名称
        {
          title: '维修项目名称',
          sorter: true,
          dataIndex: 'LABOUR_NAME',
          filter: true,
          filterType: 'input'
        },
        // 工时单价
        {
          title: '工时单价',
          sorter: true,
          dataIndex: 'LABOUR_PRICE',
          precision: 2,
          filter: true,
          filterType: 'number'
        },
        // 标准工时
        {
          title: '标准工时',
          sorter: true,
          dataIndex: 'STD_LABOUR_HOUR',
          precision: 2,
          filter: true,
          filterType: 'number'
        },
        // 工时费
        {
          title: '工时费',
          sorter: true,
          dataIndex: 'LABOUR_AMOUNT',
          precision: 2,
          filter: true,
          filterType: 'number'
        },
        // 派工工时
        {
          title: '派工工时',
          sorter: true,
          dataIndex: 'ASSIGN_LABOUR_HOUR',
          precision: 2,
          filter: true,
          filterType: 'number'
        },
        // 优惠金额
        {
          title: '优惠金额',
          sorter: true,
          dataIndex: 'DISCOUNT_AMOUNT',
          precision: 2,
          filter: true,
          filterType: 'number'
          // render: props => {
          //   props.DISCOUNT_AMOUNT = (props.LABOUR_AMOUNT - props.RECEIVE_AMOUNT).toFixed(2);
          //   return <div>{props.DISCOUNT_AMOUNT}</div>;
          // }
        },
        // 实收金额
        {
          title: '实收金额',
          sorter: true,
          dataIndex: 'RECEIVE_AMOUNT',
          precision: 2,
          filter: true,
          filterType: 'number'
          // render: props => {
          //   props.RECEIVE_AMOUNT = (props.LABOUR_AMOUNT * props.DISCOUNT).toFixed(2);
          //   return <div>{props.RECEIVE_AMOUNT}</div>;
          // }
        },
        // 技师
        {
          title: '技师',
          sorter: true,
          dataIndex: 'TECHNICIAN',
          // editable: false,
          // editType: 'select',
          // editItems: [],
          filter: true,
          filterType: 'checkbox',
          filterItems: [],
          dictItems: [],
          width: 100
        },
        // 派工标志
        {
          title: '派工标志',
          sorter: true,
          dataIndex: 'ASSIGN_TAG',
          editable: false,
          editType: 'select',
          editItems: this.createDictList(1004),
          filter: true,
          filterType: 'checkbox',
          filterItems: this.createDictList(1004)
        },
        // 是否委外
        {
          title: '是否委外',
          sorter: true,
          dataIndex: 'CONSIGN_EXTERIOR',
          editable: false,
          editType: 'select',
          editItems: this.createDictList(1004),
          filter: true,
          filterType: 'checkbox',
          filterItems: this.createDictList(1004)
          // render: props => {
          //   const dist = this.createDictList(1004).find(x => x.value === props.row.CONSIGN_EXTERIOR);
          //   return <div>{dist ? dist.text : ''}</div>;
          // }
        },
        // 是否不修
        {
          title: '是否不修',
          sorter: true,
          dataIndex: 'NEEDLESS_REPAIR',
          editable: false,
          editType: 'select',
          editItems: this.createDictList(1004),
          filter: true,
          filterType: 'checkbox',
          filterItems: this.createDictList(1004)
          // render: props => {
          //   const dist = this.createDictList(1004).find(x => x.value === props.row.NEEDLESS_REPAIR);
          //   return <div>{dist ? dist.text : ''}</div>;
          // }
        },
        // 是否预检
        {
          title: '是否预检',
          sorter: true,
          dataIndex: 'PRE_CHECK',
          editable: false,
          editType: 'select',
          editItems: this.createDictList(1004),
          filter: true,
          filterType: 'checkbox',
          filterItems: this.createDictList(1004)
          // render: props => {
          //   const dist = this.createDictList(1004).find(x => x.value === props.row.PRE_CHECK);
          //   return <div>{dist ? dist.text : ''}</div>;
          // }
        },
        // 是否内返
        {
          title: '是否内返',
          sorter: true,
          dataIndex: 'INTER_RETURN',
          editable: false,
          editType: 'select',
          editItems: this.createDictList(1004),
          filter: true,
          filterType: 'checkbox',
          filterItems: this.createDictList(1004)
          // render: props => {
          //   const dist = this.createDictList(1004).find(x => x.value === props.row.INTER_RETURN);
          //   return <div>{dist ? dist.text : ''}</div>;
          // }
        },
        // 活动编号
        {
          title: '活动编号',
          sorter: true,
          dataIndex: 'ACTIVITY_CODE',
          filter: true,
          filterType: 'input'
        },
        // 故障描述
        {
          title: '故障描述',
          sorter: true,
          dataIndex: 'APP_NAME',
          filter: true,
          filterType: 'input'
        },
        // 故障原因
        {
          title: '故障原因',
          sorter: true,
          dataIndex: 'REASON',
          filter: true,
          filterType: 'input'
        },
        // 备注
        {
          title: '备注',
          sorter: true,
          dataIndex: 'REMARK',
          filter: true,
          filterType: 'input'
        }
      ];
    },
    async searchTtRoLabour({ roNo }) {
      const res = await searchTtRoLabour({ roNo });
      console.log('查询修理项目', { roNo }, res);
      this.dataSource = res.data.rows;
    },
    async getSfqfSelect() {
      const res = await getSfqfSelect();
      if (res.resultCode == 200) {
        let arr = res.data.map(x => ({
          text: x.CHARGE_PARTITION_NAME,
          value: x.CHARGE_PARTITION_CODE
        }));
        this.columns.find(x => x.dataIndex == 'CHARGE_PARTITION_CODE').filterItems = arr;
        this.columns.find(x => x.dataIndex == 'CHARGE_PARTITION_CODE').dictItems = arr;
        // this.columns.find(x => x.dataIndex == 'CHARGE_PARTITION_CODE').editItems = arr;
      }
    },
    // 获取人员数据接口
    async getDealerUser() {
      const res = await getDealerUser();
      this.columns.find(x => x.dataIndex == 'TECHNICIAN').dictItems = this.columns.find(x => x.dataIndex === 'TECHNICIAN').filterItems = res.data.map(x => ({
        text: x.employeeName,
        value: x.userId + ''
      }));
    }
  }
};
</script>

<style scoped>
.btn-wrap {
  position: absolute;
  left: 0px;
  bottom: 0px;
  right: 0px;
  z-index: 9;
  border-top: 1px solid rgb(233, 233, 233);
  padding: 10px 20px;
  background: rgb(255, 255, 255);
  text-align: right;
}
</style>
